<template>
	<view class="main-page" style="background: white;padding-bottom: 120rpx;">
		<view class="single-info-box" style="margin-top: 40rpx;">
			<text class="font-333-32 font-bold">商家名称</text>
			<text class="font-666-28">[美团]逸甜时光(生日蛋糕)</text>
		</view>
		<view class="single-info-box">
			<text class="font-333-32 font-bold">商家地址</text>
			<text class="font-666-28">天心区夏家冲社区轻院路26号9栋102</text>
		</view>
		<view class="single-info-box">
			<text class="font-333-32 font-bold">套餐要求</text>
			<text class="font-666-28">本店通用</text>
		</view>
		<view class="single-info-box">
			<text class="font-333-32 font-bold">商家要求</text>
			<text class="font-666-28">5星好评+10字+晒3图</text>
		</view>
		<view class="single-info-box">
			<text class="font-333-32 font-bold">奖励说明</text>
			<text class="font-666-28">满18返8</text>
		</view>
		<view class="divider"></view>
		<view class="single-info-box" style="margin-top: 0rpx;">
			<view class="row-container">
				<text class="font-ff621f-32">*</text>
				<text class="font-333-32 font-bold">订单编号</text>
			</view>
			<input 
				v-model="threeOrderNo"
				class="font-333-28"
				placeholder="请复制美团上的订单编号"
				placeholder-class="font-999-28"
				style="text-align: right;"
			/>
		</view>
		<view class="single-info-box">
			<view class="row-container">
				<text class="font-ff621f-32">*</text>
				<text class="font-333-32 font-bold">实付金额</text>
			</view>
			<input 
				v-model="money"
				class="font-333-28"
				placeholder="请输入您在美团的实付金额"
				placeholder-class="font-999-28"
				style="text-align: right;"
			/>
		</view>
		<view class="divider"></view>
		<view class="single-info-box" style="margin-top: 0rpx;">
			<view class="row-container">
				<text class="font-666-24">提交订单截止时间剩余</text>
				<text class="count-down-time">47</text>
				<text class="font-f65a50-28">时</text>
				<text class="count-down-time">59</text>
				<text class="font-f65a50-28">分</text>
				<text class="count-down-time">59</text>
				<text class="font-f65a50-28">秒</text>
			</view>
			<text class="give-up">放弃名额</text>
		</view>
		<view class="upload-main">
			<view class="single-upload-box">
				<image class="add-img" src="../../static/order/ic_add_img.png"></image>
				<text class="font-333-28" style="font-weight: bold;line-height: 39rpx;">上传美团订单截图（1）</text>
				<text class="font-333-28" style="font-weight: bold;line-height: 39rpx;">须显示商家名称</text>
				<text class="check-exam">查看实例</text>
				<image class="down" src="../../static/order/ic_down.png"></image>
				<text class="check-btn">查看示例</text>
				<text class="font-ff621f-28">请严格按图例提交</text>
			</view>
			<view class="single-upload-box">
				<image class="add-img" src="../../static/order/ic_add_img.png"></image>
				<text class="font-333-28" style="font-weight: bold;line-height: 39rpx;">上传美团订单截图（2）</text>
				<text class="font-333-28" style="font-weight: bold;line-height: 39rpx;">须显示商家名称</text>
				<text class="check-exam">查看实例</text>
				<image class="down" src="../../static/order/ic_down.png"></image>
				<text class="check-btn">查看示例</text>
				<text class="font-ff621f-28">请严格按图例提交</text>
			</view>
			<view class="single-upload-box">
				<image class="add-img" src="../../static/order/ic_add_img.png"></image>
				<text class="font-333-28" style="font-weight: bold;line-height: 39rpx;">上传评论截图(1)</text>
				<text class="font-333-28" style="font-weight: bold;line-height: 39rpx;">5星好评+10字+晒3图</text>
				<text class="check-exam">查看实例</text>
				<image class="down" src="../../static/order/ic_down.png"></image>
				<text class="check-btn">查看示例</text>
				<text class="font-ff621f-28">请严格按图例提交</text>
			</view>
		</view>
		
		<!-- 底部 -->
		<view class="bottom-box">
			<view class="bottom-btn">
				<image class="bottom-ic" src="../../static/common/ic_back_home.png"></image>
				<text class="font-333-22" style="font-weight: 600;">首页</text>
			</view>
			<view class="bottom-btn">
				<image class="bottom-ic" src="../../static/common/ic_service.png"></image>
				<text class="font-333-22" style="font-weight: 600;">客服</text>
			</view>
			<text class="confirm-btn" @click="gotoUploadOrder">提交订单</text>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				threeOrderNo:'' , // 第三方订单
				money:'' , // 实付金额
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.single-info-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 60rpx);
		margin: 30rpx 30rpx 0rpx 30rpx;
	}
	
	.divider{
		width: 100%;
		height: 20rpx;
		background: #F5F5F5;
		margin: 40rpx 0rpx;
	}
	
	.count-down-time{
		color: white;
		font-size: 24rpx;
		font-weight: bold;
		background: #F65A50;
		border-radius: 10rpx;
		margin: 0rpx 10rpx;
		padding: 4rpx 6rpx;
	}
	
	.give-up{
		padding: 10rpx 23rpx;
		text-align: center;
		color: #333333;
		font-size: 24rpx;
		font-weight: bold;
		border-radius: 30rpx;
		background: #FFD100;
	}
	
	.upload-main{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: calc(100% - 40rpx);
		margin: 30rpx 20rpx 10rpx 20rpx;
		
		.single-upload-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: calc(50% - 30rpx);
			margin: 0rpx 10rpx;
			background: #F5F5F5;
			border: #E4E4E4 solid 1rpx;
			margin-bottom: 20rpx;
			padding-bottom: 30rpx;
			border-radius: 10rpx;
			
			.add-img{
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 25rpx;
				margin-top: 50rpx;
			}
			
			.check-exam{
				width: 28rpx;
				text-align: center;
				line-height: 39rpx;
				color: #333333;
				font-size: 28rpx;
				margin-top: 48rpx;
			}
			
			.down{
				width: 28rpx;
				height: 28rpx;
				margin-top: 6rpx;
				margin-bottom: 10rpx;
			}
			
			.check-btn{
				background: #FFD100;
				padding: 8rpx 26rpx;
				margin-bottom: 12rpx;
				text-align: center;
				color: #333333;
				font-size: 24rpx;
				font-weight: bold;
				border-radius: 30rpx;
			}
		}
	}
	
	.bottom-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc(100% - 52rpx);
		height: 120rpx;
		background: white;
		position: fixed;
		bottom: 0rpx;
		padding-left: 22rpx;
		padding-right: 30rpx;
		z-index: 100;
		
		.bottom-btn{
			padding: 0rpx 22rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			.bottom-ic{
				width: 38rpx;
				height: 38rpx;
				margin-bottom: 8rpx;
			}
			
		}
		
		.confirm-btn{
			flex-grow: 1;
			height: 88rpx;
			background: #FFD100;
			border-radius: 44rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
			margin-left: 7rpx;
		}
		
	}
	
</style>
